<template>
  <div style="background: #fff">
    <Search />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="content">
        <div class="content-left">
           <van-sidebar v-model="activeKey" @change="getleftTab">
            <van-sidebar-item v-for="(item,index) in icon" :title="item.name" :key="index" />
          </van-sidebar>
        </div>
        <div class="content-right">
          <div class="content-right-up">
            <van-tabs v-model="active" @click="sort">
              <van-tab title="浏览量排序"></van-tab>
              <van-tab title="价格排序"></van-tab>
            </van-tabs>
          </div>
          <div  v-if="changedata.length" class="content-right-down">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="30"
          >
            <div >
              <van-card
                  v-for="item in changedata"
                  :key="item.id * Date.now() * Math.random()"
                  :num="item.browsenum"
                  :price="item.price | money"
                  :title="item.name"
                  :thumb="item.imgs.split('||')[0]"
                  @click="Godetail(item.id)"
                />
            </div>
          </van-list>
          </div>
          <div class="content-right-down" v-else>
            <van-empty description="暂无数据" />
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <tabbar />
    <Gotop />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import Search from '@components/Search'
import Gotop from '@components/GoTop'
import { getIcon, cateList } from '@api/home'

export default {
  name: 'cate',
  data () {
    return {
      activeKey: '',
      activeName: 1,
      active: 0,
      list: [],
      icon: [],
      query: '鲜花',
      sortKey: 'buynum',
      tabId: 0,
      model: '',
      isLoading: false,
      loading: false,
      finished: false,
      changedata: [],
      goods: {
        money: { page: 1, size: 9, list: [] },
        buynum: { page: 1, size: 9, list: [] }
      }
    }
  },
  created () {
    this.getListSort()
    this.getIcon()
  },
  filters: {
    money (val) {
      return val.toFixed(2)
    }
  },
  methods: {
    Godetail (id) {
      this.$router.push(`/detail?id=${id}`)
    },
    getIcon () {
      getIcon().then(res => {
        if (res.data.code === 200) {
          this.icon = res.data.data
        }
      })
    },
    // ------------------------------------
    onLoad () {
      this.goods[this.sortKey].page++
      cateList(this.query, this.goods[this.sortKey].size, this.goods[this.sortKey].page).then((res) => {
        if (res.data.data[this.sortKey].length < this.goods[this.sortKey].size) {
          this.finished = true
        }
        if (res.data.code === 200) {
          this.goods[this.sortKey].list = [...this.goods[this.sortKey].list, ...res.data.data[this.sortKey]]
          this.changedata = this.goods[this.sortKey].list
        }
        this.loading = false
      })
    },
    onRefresh () {
      this.goods = {
        money: { page: 1, size: 9, list: [] },
        buynum: { page: 1, size: 9, list: [] }
      }
      this.init()
      this.active = 0
      this.isLoading = false
      this.loading = false
    },
    init () {
      setTimeout(() => {
        this.isLoading = false
      }, 8000)
      this.finished = false
      cateList(this.query, this.goods[this.sortKey].size, 1).then(res => {
        if (res.data.data[this.sortKey].length < this.goods[this.sortKey].size) {
          this.finished = true
        }
        if (res.data.code === 200) {
          this.goods.buynum.list = res.data.data.buynum
          this.goods.money.list = res.data.data.money
        }
        this.isLoading = false
        this.changedata = this.goods[this.sortKey].list
      })
    },
    getListSort () {
      cateList(this.query, this.goods[this.sortKey].size, 1).then(res => {
        if (res.data.data[this.sortKey].length < this.goods[this.sortKey].size) {
          this.finished = true
        }
        if (res.data.code === 200) {
          this.goods.buynum.list = res.data.data.buynum
          this.goods.money.list = res.data.data.money
          this.loading = false
        }
        this.changedata = this.goods[this.sortKey].list
      })
    },
    getleftTab (cid) {
      this.finished = false
      this.goods = {
        money: { page: 1, size: 9, list: [] },
        buynum: { page: 1, size: 9, list: [] }
      }
      var arr = ['鲜花', '蛋糕', '巧克力', '礼品', '生日祝福', '表白求婚', '新店开业', '周年纪念']
      this.query = arr[cid]
      this.active = 0
      this.getListSort()
    },
    sort (index) {
      var key = !index ? 'buynum' : 'money'
      this.finished = false
      this.changedata = this.goods[key].list
    }
  },
  components: { Tabbar, Search, Gotop }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 54px;
  display: flex;
  &-left {
    margin-top: 44px;
  }
  &-right {
    flex: 1;
    display: flex;
    flex-direction: wrap;
    flex-direction: column;
    &-up {
      width: 100%;
      height: 44px;
    }
    &-down {
      flex: 1;
      height: 100vh;
      margin-bottom: 54px;
    }
  }
}
/deep/.van-sidebar {
  width: 125px;
}
/deep/.van-sidebar-item__text {
  width: 80px;
}
</style>
